<template>
    <div class="tools-globe-page _page" id="map-container"></div>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue'
import config from './config'
import { addCesium } from '@/lib/util'
export default {
    setup () {
        let viewer = null
        const init = async () => {
            await addCesium()
            Cesium.Ion.defaultAccessToken = config.cesiumIonToken
            viewer = new Cesium.Viewer('map-container', {
                terrain: Cesium.Terrain.fromWorldTerrain(),
                navigationHelpButton: false,
                baseLayerPicker: false,
                animation: false,
                timeline: false,
                homeButton: false,
                geocoder: false,
                fullscreenButton: false,
                sceneModePicker: false,
                infoBox: false,
                baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
                    url: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}`,
                    tilingScheme: new Cesium.WebMercatorTilingScheme(),
                    maximumLevel: 18
                }))
            })
            viewer.cesiumWidget.creditContainer.style.display = 'none'

            // 天地图影像
            // viewer.imageryLayers.addImageryProvider(new cesium.UrlTemplateImageryProvider({
            //     url: `https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${config.tiandituKey}`,
            //     subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //     tilingScheme: new cesium.WebMercatorTilingScheme(),
            //     maximumLevel: 18
            // }))

            // 天地图地名标注
            viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                url: `https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${config.tiandituKey}`,
                subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                tilingScheme: new Cesium.WebMercatorTilingScheme(),
                maximumLevel: 18
            }))
        }

        onMounted(() => {
            init()
        })

        onBeforeUnmount(() => {
            if (viewer) {
                viewer.destroy()
            }
        })
    }
}
</script>

<style lang="scss">
    @use './style.scss';
</style>
